<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            color: yellow;
            background: green;
            display: none;
        }

        div.show {
            display: block;
        }
    </style>
</head>
<body>
<!--组件的根-->
<div id="app">
    声明了这个数据项，js填充这个数据项
    {{message}}
    <!--    <h2 @click="show=!show">{{title}}</h2>-->
    <h2 @click="myshow()">{{title}}</h2>
    <!--    <div style="color:red;background:blue" :style="{width,height}">-->
    <div class="box" :class="{show}" :style="{width,height}">
        <ul>
            <!--加个冒号就是vue了-->
            <li v-for="item in articles.slice(0,3)" :title="item.content">{{item.title}}</li>
        </ul>
    </div>
</div>
</body>
<!--<script src="https://unpkg.com/vue@next"></script>-->
<script src="./vue3.js"></script>
<script>
    /*-vue2
        const app = new vue({
            el: "#app",
            data: {
                message: 'this is a test'
            }
        });
    */
    const app = Vue.createApp({
        data() {
            return {
                show: true,
                width: '300px',
                height: '300px',
                message: 'this is a test',
                title: 'vue demo',
                articles: [
                    {title: '111', content: '1'},
                    {title: '222', content: '2'},
                    {title: '333', content: '3'},
                    {title: '444', content: '4'},
                    {title: '555', content: '5'},
                ]
            }
        },
        methods: {
            myshow() {
                this.show = !this.show
            }
        }
    }).mount('#app');

    //这样mount无法在console里面改变值，不知道为什么
    // const vm = app.mount("#app");
</script>
</html>